<template>
    <t-adaptive-page ref="elTable" :opts="opts" :table="state.table" :columns="state.table.columns"
        :isShowPagination="isShowPagination" @selection-change="selected" @cell-mouse-enter="handleCellMouseEnter"
        @cell-mouse-leave="handleCellMouseLeave" :row-class-name="tableRowClassName" @row-click="handleRowClick">
        <template #pingzheng="{ scope }">
            <div class="cardList">
                <div class="cardHeader">
                    <li class="dateLabel">
                        日期：<span>{{ scope.row.date }}</span>
                    </li>
                    <li class="voucherNoLabel">
                        凭证字号：<span>{{ scope.row.date }}</span>
                    </li>
                    <div class="rowBtns">
                        <div class="rowBtns_table">
                            <span @click="editBtn"><el-icon>
                                    <Edit />
                                </el-icon>修改</span>
                            <span @click="editBtn"><el-icon>
                                    <Delete />
                                </el-icon>删除</span>
                            <span @click="editBtn"><el-icon>
                                    <CirclePlus />
                                </el-icon>插入</span>
                            <span @click="editBtn"><el-icon>
                                    <Printer />
                                </el-icon>打印</span>
                        </div>
                    </div>
                </div>
                <!-- {{ scope.row.selectTable }} -->
                <t-table ref="elInnerTable" :table="scope.row" :columns="state.res.columns"
                    :showHeader="false" show-summary :isShowPagination="false" :border="true"
                    :summary-method="getSummaries" class="customer-no-border-table" />
            </div>
        </template>

        <template #footer>
            <el-dialog :title="title" width="70%" draggable v-model="addDialog">
                <pingzhengTable @exportExcel="addConfirm" />
            </el-dialog>
        </template>
    </t-adaptive-page>
</template>

<script setup lang="tsx" name="Pingzheng">
import tableData from "./tableData2.json"
import pingzhengTable from "./components/pingzhengTable.vue"

const title = ref("编辑凭证")
const addDialog = ref(false)

// 弹窗确定提交
const addConfirm = () => {
    console.log("确定")
}

// 修改凭证
const editBtn = () => {
    addDialog.value = true
}

const isShowPagination: any = ref(true) // 是否显示分页

const state: any = reactive({
    table: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        border: true,
        // 是否显示复选框
        firstColumn: { type: "selection", fixed: true },
        data: [],
        columns: [
            {
                prop: "name",
                label: "",
                canEdit: true,
                configEdit: {
                    editSlotName: "pingzheng",
                },
                renderHeader: (row: any) => {
                    return renderPingzheng(row);
                },
            }
        ]
    },
    res: {
        columns: [
            {
                prop: "name",
                label: "摘要",
                minWidth: "25",
                align: "left",
            },
            {
                prop: "subject",
                label: "会计科目",
                minWidth: "35",
                align: "left",
            },
            {
                prop: "borrowerStart1",
                label: "借方金额",
                minWidth: "20",
                align: "right",
            },
            {
                prop: "borrowerStart2",
                label: "贷方金额",
                minWidth: "20",
                align: "right",
            }
        ]
    }
})

const opts = computed(() => {
    return {
        likeName: {
            label: "",
            placeholder: "可输入凭证号/摘要/科目/金额...",
            comp: "el-input",
            span: 2,
        }
    }
})


onMounted(() => {
    getData()
})

// 获取table数据
const getData = async () => {
    const res = tableData;
    if (res.success) {
        state.table.data = res.table.data;
        state.table.total = res.table.total;
    }
}

// 凭证表头
const renderPingzheng = (row: any) => {
    return (
        <div class="dgrid-row-table">
            <div class="gridHeader">
                <div class="gridRow field_comments">摘要</div>
                <div class="gridRow field_name">科目</div>
                <div class="gridRow field_basePostedDr">借方金额</div>
                <div class="gridRow field_basePostedCr">贷方金额</div>
            </div>
        </div>
    )
}

let currentIndex: any = ref()
const selectedArrData = ref<any[]>([]); // 把选择到的当前行的id存到数组中

// 复选框被选中的事件
const selected = (row: any) => {
    console.log(row); //点击的那行数据
    selectedArrData.value = row; // ✅ 直接替换数组
}

// 鼠标移入
const handleCellMouseEnter = (row: any) => {
    //标记当前是哪个分组
    currentIndex = row.order
}

// 鼠标移出
const handleCellMouseLeave = () => {
    //移出是清空光标
    currentIndex = ""
}

const checkIdList = computed(() => selectedArrData.value.map((item: any) => item.order));

const tableRowClassName = ({ row }) => {
    if (checkIdList.value.includes(row.order)) {
        return "hover-bg";
    } else {
        return "";
    }
}

const elTable = ref() // 获取表格实例
function handleRowClick(row: any) {
    // 判断当前行是否被选中
    const isSelected = selectedArrData.value.includes(row);
    // 如果当前行被选中，则取消选中；如果当前行未被选中，则选中
    elTable.value?.toggleRowSelection(row, !isSelected);
}

import { h } from "vue";
import { ElIcon } from "element-plus";
import { TrendCharts } from "@element-plus/icons-vue";

// 合计
const getSummaries = (param: any) => {
    const { columns, data } = param;
    const sums: any[] = [];
    columns.forEach((column: any, index: any) => {
        if (index === 0) {
            sums[index] = h("div", { style: { display: 'flex', alignItems: 'center' }}, [
                h(ElIcon, { style: { color: '#409eff'}}, () => h(TrendCharts)), // ✅ 使用 `ElIcon` 包裹 `Timer`
                " 总计",
            ]);
            return;
        }
        const values = data.map((item: any) => Number(item[column.property]));
        if (
            column.property === "borrowerStart1" ||
            column.property === "borrowerStart2"
        ) {
            const totalValue = values.reduce((prev: any, curr: any) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + value;
                } else {
                    return prev;
                }
            }, 0);
            sums[index] = totalValue
                .toFixed(2)
                .toString()
                .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,");
        } else {
            sums[index] = "";
        }
    });
    return sums;
}
</script>

<style lang="scss" scoped>
.t-table {
    .t-table {
        background: none;

        :deep(.el-table) {
            background: none;

            tr {
                background: none;
            }
        }

        & ::before {
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0px;
        }
    }
}

.dgrid-row-table {
    width: 100%;

    .gridHeader {
        height: 34px;
        line-height: 34px;

        .gridRow {
            display: inline-block;
        }

        .field_comments {
            width: 25%;
        }

        .field_name {
            width: 35%;
        }

        .field_basePostedDr {
            width: 20%;
        }

        .field_basePostedCr {
            width: 20%;
        }
    }
}

.cardHeader {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    display: grid;
    grid-template-columns: 15% 15% 70%;
    // border-bottom: 1px solid #dfe6ec;

    li {
        list-style: none;
    }

    .dateLabel,
    .voucherNoLabel {
        float: left;
        text-align: left;
    }

    .voucherNoLabel {
        margin-left: 18px;
    }

    .rowBtns {
        text-align: right;
        padding: 0 12px;
        display: none;
        color: #000;

        .rowBtns_table {
            display: flex;
            gap: 16px;
            flex-direction: row;
            justify-content: flex-end;

            span {
                display: flex;
                align-items: center;

                .editVoucherBtn {
                    padding-right: 4px;
                }
            }
        }

    }
}

:deep(.dgrid-row-table) {
    width: 100%;

    .gridHeader {
        height: 34px;
        line-height: 34px;

        .gridRow {
            display: inline-block;
        }

        .field_comments {
            width: 25%;
        }

        .field_name {
            width: 35%;
        }

        .field_basePostedDr {
            width: 20%;
        }

        .field_basePostedCr {
            width: 20%;
        }
    }
}

:deep(.el-table) {
    .el-table__body .el-table__row {
        &.hover-bg {
            background-color: #e8f4ff !important;
            position: relative;

            td {
                background-color: #e8f4ff !important;
            }

            .cardHeader {
                background-color: #e8f4ff !important;
            }

            .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                background-color: #e8f4ff !important;
            }
        }

        &.hover-row {
            position: relative;

            .rowBtns {
                display: block;
            }

            .el-table-fixed-column--left {
                border-top: 1px solid #409eff;
                border-left: 1px solid #409eff;
                border-bottom: 1px solid #409eff;
                border-right: 1px solid #ebeef5 !important;
            }

            &>.el-table__cell {
                position: relative;
                z-index: 5;
                border-top: 1px solid #409eff;
                border-right: 1px solid #409eff;
                border-bottom: 1px solid #409eff;
                box-sizing: border-box;
            }

        }

    }

    .el-table__header-wrapper th.el-table__cell>.cell {
        padding: 0;
    }

    .cell.el-tooltip {
        padding: 0 !important;
    }

    .el-table__cell {
        padding: 0 !important;
    }

    .el-form-item__content {
        .el-table .cell.el-tooltip {
            padding: 0 10px !important;
        }

        .el-table__cell {
            padding: 4px 1px !important;
        }

        .el-table__body tr.el-table__row>td.el-table__cell:last-child {
            border-right: 0;
        }

        .el-table__footer-wrapper .el-table__cell {
            border-bottom: 0;
            border-right: 0;
            height: 48px;
            line-height: 48px;
            font-weight: 600;
            color: #000;
            background-color: rgba(62, 200, 221, .05);
        }

        .el-table__footer-wrapper .el-table__cell:nth-child(2),
        .el-table__footer-wrapper .el-table__cell:nth-child(3) {
            border-right: 1px solid #dfe6ec;
        }
    }

    :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
        background-color: #ffffff;
    }

    :deep(.el-table__body) tr.hover-row>td.el-table__cell {
        background: none;
    }

    .cell.el-tooltip {
        padding: 0 10px;
    }
}


// 表格右边框线
:deep(.el-table--border:after) {
    width: 0;
}

// 表格上边框线
:deep(.el-table__inner-wrapper::after) {
    height: 1px;
}


// 表格左边框线
.el-table::before {
    width: 0;
}

:deep(.el-table__border-left-patch) {
    width: 0;
}
</style>